<template>
  <div class="myCenter">
    <div class="people-info">
      <div>
        <img :src="info.img" alt="" />
      </div>
      <div>
        <p>{{ info.userName }}</p>
        <span>{{ info.phone }}</span>
      </div>
    </div>
    <div class="content">

      <van-cell is-link value="" @click="goWishlist">
        <template #title>
          <img src="@/assets/images/icon_up.png" alt="" />
          <span class="custom-title">上传意向单</span>
        </template>
      </van-cell>

      <van-cell is-link value="" @click="goPeopleInfo">
        <template #title>
          <img src="@/assets/images/icon_ziliao.png" alt="" />
          <span class="custom-title">个人资料</span>
        </template>
      </van-cell>
      <van-cell is-link value="" @click="goMarkeingQR">
        <template #title>
          <img src="@/assets/images/icon_code.png" alt="" />
          <span class="custom-title">二维码生成</span>
        </template>
      </van-cell>
    </div>
    <div class="logOut" @click="loginOut">退出登录</div>
  </div>
</template>
<script>
import { loginOut } from './service/service.js'
export default {
  name: 'MyCenter',
  data () {
    return {
      info: {
        userName: '',
        phone: '',
        img: require('@/assets/images/pic.png')
      },
      backpath: ''
    }
  },
  created () {
    this.info.userName = this.$route.query.userName
    this.info.phone = this.$route.query.phone
  },
  watch: {

  },
  methods: {

    goWishlist () {
      this.$router.push({ path: '/personal/wishlist' })
    },
    goPeopleInfo () {
      this.$router.push({ path: '/personal/peopleInfo', query: { userName: this.info.userName, phone: this.info.phone } })
    },
    goMarkeingQR () {
      this.$router.push({ path: '/personal/QRcode', query: { userName: this.info.userName, phone: this.info.phone } })
    },

    loginOut () {
      loginOut()
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }
          // this.$toast(data.msg)
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },

  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 返回按钮到主页
      vm.$emit('backPath', '/personal/personal-home')
    })
  },
  beforeRouteLeave (to, from, next) {
    // 离开个人中心，返回按钮路径置空，恢复默认返回this.$router.back()
    this.$emit('backPath', '')
    next()
  }
}
</script>
<style lang="less" scoped>
.myCenter {
  background: url("../../assets/images/img_myCenter.png") no-repeat left
    top/100%;
  padding-top: 26px;
}
.people-info {
  margin: 0 15px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 2px rgba(35, 129, 241, 0.1);
  border-radius: 8px;
  padding: 14px 20px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  > div:first-child {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    margin-right: 15px;
    img {
      width: 100%;
    }
  }
  > div:nth-child(2) {
    p {
      color: #333330;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 2px;
    }
    span {
      font-size: 12px;
      color: #a5b5c9;
    }
  }
  .icon-img {
    position: absolute;
    top: 28px;
    right: 20px;
  }
}
.content {
  margin-top: 25px;
  .van-cell {
    font-size: 15px;
    margin-top: 8px;
  }
  img {
    width: 16px;
    margin-right: 7px;
    vertical-align: text-top;
  }
}
.logOut {
  height: 44px;
  font-size: 15px;
  color: #ff2725;
  line-height: 44px;
  text-align: center;
  background: #fff;
  margin-top: 100px;
}
</style>
